<template>
<section class="screen" ref="sectionRef" v-bind="setSectionRef">
    <div class="screenIn">
        <div class="screen_container">
            <div class="row_between">
                <div class="screen_left">
                    <h3 class="f32 fontWeight400">G视频音乐·开启奇幻之旅</h3>
                    <h1 class="f50 fontWeight400 mt20" style="line-height: 7rem;">人工智能音频模型为您的<br/>音乐提供创造力</h1>
                    <div class="f24 mt40 slide_type_box" >
                        <!-- :class="{'active': isActive}" -->
                        <div class="slide_view active" >
                            <p>轻快的、小号、爵士、酒吧 （摇骰子随机生成）</p>
                            <span class="circle"></span>
                        </div>
                    </div>
                    <router-link to="/aimusic" class="to_aimusic" tag="a">
                        开始创作
                        <img src="../../images/arrow_down.png" alt="">
                    </router-link>

                    <router-link to="/contactUs" class="contactUs">联系我们 <img src="../../images/arrow_right.png" alt=""></router-link>
                </div>
                <div class="tabMusic_container">
                    <div class="tabMusic_top">
                        <p>切换下一首风格</p>
                        <button class="tabMusic_btn prev_btn" @click="prevAudio"></button>
                        <button class="tabMusic_btn next_btn" @click="nextAudio"></button>
                    </div>
                    <div class="audio_container">
                        <div 
                            :class="['audio', { active: index === userState.currentAudioIndex }]" 
                            v-for="(item, index) in songs" 
                            :key="index">
                            <Audio :musicData="item"></Audio>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="right_bar">
                <button class="right_bar_item icon_search">
                    <img src="../../images/icon_search.svg" alt="">
                </button>
                <button class="right_bar_item icon_random">
                    <img src="../../images/icon_random.svg" alt="">
                </button>
                <button class="right_bar_item"><img src="../../images/img0.png" alt=""></button>
                <button class="right_bar_item"><img src="../../images/img1.png" alt=""></button>
                <button class="right_bar_item"><img src="../../images/img2.png" alt=""></button>
                <button class="right_bar_item"><img src="../../images/img3.png" alt=""></button>
                <button class="right_bar_item"><img src="../../images/img4.png" alt=""></button>
            </div> -->
        </div>
    </div>
</section>
</template>

<script setup>
import Audio from '../../components/audio.vue';
import { ref, reactive, onMounted, watch } from 'vue'
import { useUserStore } from '../../store/user';
  
const { userState } = useUserStore()

let isActive = ref(false)

const songs = reactive([
    { 
        title: "东方音乐、竹笛、二胡、琵琶、扬琴", 
        src: "https://cdn1.suno.ai/0842fb97-1355-4b2c-ace9-81c9de754aba.mp4", 
        img:'https://cdn2.suno.ai/image_0842fb97-1355-4b2c-ace9-81c9de754aba.jpeg', 
        lrc: "/AI作曲1.lrc" 
    },
    { 
        title: "摇滚、公路摇滚", 
        src: "https://cdn1.suno.ai/70629cfa-d09c-4820-ad8e-8c3e6c26503b.mp4", 
        img:'https://cdn2.suno.ai/image_70629cfa-d09c-4820-ad8e-8c3e6c26503b.jpeg', 
        lrc: "/AI作曲2.lrc" 
    },
    { 
        title: "清新、清新愉快", 
        src: "https://cdn1.suno.ai/ae8954d2-39e8-4932-a1c1-1309c4f38bf8.mp4", 
        img:'https://cdn2.suno.ai/image_ae8954d2-39e8-4932-a1c1-1309c4f38bf8.jpeg', 
        lrc: "/AI作曲3.lrc" 
    }
]);

const nextAudio = () => {
  userState.currentAudioIndex = (userState.currentAudioIndex + 1) % songs.length;
};

const prevAudio = () => {
  userState.currentAudioIndex = (userState.currentAudioIndex - 1 + songs.length) % songs.length;
};

const props = defineProps({
  setSectionRef: {
    type: Function,
    required: true
  },
  sectionindex: {
    type: Number,
    required: false
  }
});

const sectionRef = ref(null);
watch(()=>props.sectionindex, (val)=>{
    console.log('watch:',val)
    if (val === 1) {
        // console.log('你来到了第二屏')
        isActive.value = true
    }

})
onMounted(() => {
  props.setSectionRef(sectionRef.value); // 将分屏 ref 传递给父组件
  console.log('分屏 2 渲染:', sectionRef.value);

  

});
</script>

<style scoped>
.row_between {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.screen_left {
    margin-top: 5rem;
}

.slide_type_box {
    width: 81.6rem;
    height: 8.8rem;
    line-height: 8.8rem;
    border-radius: 10.0rem;
    padding-left: 3.0rem;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.circle {
    width: 6.6rem;
    height: 6.6rem;
    border-radius: 100%;
    background-color: #d9d9d9;
    display: block;
    position: absolute;
    right: 2.0rem;
    top: 1.0rem;
}

.slide_view{
    width: 100%;
    margin-left: -80.0rem;
    position: relative;
    transition: all 1s;
}

.slide_view.active {
    margin-left: 0;
}

@keyframes gradientChange {
  0% {
    background-image: linear-gradient(90deg, rgba(19, 47, 231, 1) 0%, rgba(11, 26, 129, 1) 100%);
  }
  100% {
    background-image: linear-gradient(90deg, rgba(19, 47, 231, 1) 0%, rgba(19, 47, 231, 1) 100%);
  }
}

.to_aimusic {
    width: 26.6rem;
    height: 7.4rem;
    line-height: 7.4rem;
    font-size: 3.2rem;
    color: #FFF;
    border-radius: 5rem;
    background-image: linear-gradient(90deg, rgba(19, 47, 231, 1) 0%, rgba(11, 26, 129, 1) 100%);
    transition: background-image 0.5s ease;
    border-radius: 51..5rem;
    text-align: center;
    margin-top: 5.0rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.to_aimusic:hover {
    animation: gradientChange 0.5s forwards;
}

.to_aimusic img {
    transform: rotate(270deg);
    width: 3rem;
    height: 3rem;
    margin-left: 2.0rem;
}



.contactUs {
    width: 26.6rem;
    height: 7.4rem;
    font-size: 2rem;
    color: #FFF;
    margin-top: 10.0rem;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.contactUs img {
    width: 2.0rem;
    height: 2.0rem;
    margin-left: 2.0rem;
}

.screen_right {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.audio_container {
    width: 40rem;
    height: 42rem;
    /* background-color: red; */
    position: relative;
}

.audio {
    position: absolute;
    transition: all .5s;
    top: 0;
    left: 5rem;
    opacity: .1;
    z-index: 1;
    filter: blur(2px);
}

.audio.active {
    left: 0;
    opacity: 1;
    z-index: 2;
    filter: blur(0);
}

.tabMusic_container {
    width: 40rem;
    height: 68rem;
    margin-right: 14rem;
    /* background-color: red; */
}

.tabMusic_top {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    color: rgba(255, 255, 255, 0.4);;
    font-size: 1.6rem;
    margin-bottom: 3rem;
    gap: 1.5rem;
}

.tabMusic_top img {
    width: 3rem;
    height: 3rem;
}

.tabMusic_btn {
    width: 5rem;
    height: 5rem;
    border-radius: 10rem;
    background: #FFF url(../../images/red_arrow_right.svg) no-repeat center;
    background-size: 40%;
    transition: all .5s;
    opacity: .5;
    cursor: pointer;
}

.tabMusic_btn:hover {
    opacity: 1;
}

.prev_btn{
    transform: rotate(180deg);
}

.right_bar {
    width: 6rem;
    height: 36rem;
    background-color: rgba(255,255,255,.5);
    border-radius: 1rem;
    /* right: 3rem; */
    padding: .5rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    position: absolute; /* 设置元素为绝对定位 */
    top: 50%; /* 元素的顶部位置设为容器高度的 50% */
    right: 4rem;
    transform: translateY(-50%); /* 将元素移动其自身高度和宽度的一半 */
    
}

.right_bar_item {
    width: 4.7rem;
    height: 4.7rem;
    border-radius: 1rem;
    cursor: pointer;
}

.right_bar_item img {
    width: 100%;
    height: 100%;
}

.icon_search, .icon_random {
    transform: scale(.5);
}




</style>
  